<template>
  <el-form :model="postData" status-icon show-message :rules="rules" ref="phoneFormRef" class="login-form">
    <div class="login-title">手机登录</div>
    <el-form-item prop="phone">
      <el-input v-model="postData.phone" style="width: 250px" :prefix-icon="Iphone"
                placeholder="手机号码"
                autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item prop="code" style="width: 250px; margin:0 auto; margin-top: 20px;margin-bottom: 20px">
      <el-input v-model="postData.code" style="width: 165px" :prefix-icon="Position" placeholder="短信验证码"
                autocomplete="off"></el-input>
      <el-button size="small" style="height: 32px;width: 84px" :disabled="disabled"
                 @click="getCode">
        {{ codeBtnWord }}
      </el-button>
    </el-form-item>
    <el-form-item class="btn">
      <el-button type="primary" @click="">登录</el-button>
      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {Position, Iphone} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";

const phoneFormRef = ref()
const postData = reactive({
  phone: '',
  code: ''
})
let codeBtnWord = ref('获取验证码')

const disabled = ref(false)

const rules = reactive({
  phone: [{required: true, message: '请输入用户名', trigger: 'blur'}],
  code: [{required: true, message: '请输入验证码', trigger: 'blur'}]
})

const getCode = () => {
  if (postData.phone == '') {
    phoneFormRef.value.validateField('phone')
  } else {
    codeBtnWord.value = 60
    let time = setInterval(() => {
      disabled.value = true
      codeBtnWord.value--
      if (codeBtnWord.value < 0) {
        codeBtnWord.value = '获取验证码'
        disabled.value = false
        clearInterval(time)
      }
    }, 1000)
  }
}
const emit = defineEmits(['on-click'])
const back = () => {
  emit('on-click', 0)
}
</script>

<style lang="scss" scoped>
.login-form {
  width: 300px;

  .el-input {
    margin: 0 auto;
  }

  .login-title {
    width: 250px;
    text-align: center;
    margin: 10px auto;
  }

  .el-form-item:nth-child(2) {
    :deep(.el-form-item__content .el-form-item__error) {
      left: 25px !important;
    }
  }


  .btn {
    .el-button {
      margin: 0 auto;
    }
  }
}
</style>
